import { useSignal } from "@preact/signals-react";


function sleep(delay: number) {
	var start = (new Date()).getTime();
	while ((new Date()).getTime() - start < delay) {
		continue;
	}
}

async function getAPromise() {
	sleep(2000)
	return 'result'
}

const contact = {
	first: '',
	last: '',
	twitter: '',
	avatar: '',
	notes: '',
}
export default function EditContact() {
	const first = useSignal('')
	const last = useSignal('')
	const twitter = useSignal('')
	const avatar = useSignal('')
	const notes = useSignal('')
	function submitHandler() {
		console.log({
			first: first.value,
			last: last.value, 
			twitter: twitter.value,
			avatar: avatar.value,
			notes: notes.value
		})
	}
	return (
		<div className="flex flex-col justify-center">
			<h1 className="text-3xl font-bold underline">
				Hello world!
			</h1>
			<form onSubmit={submitHandler} className="flex flex-col space-y-2">
				<p className="space-x-3">
					<span>Name</span>
					<input
						placeholder="First"
						aria-label="First name"
						value={first.value}
						onInput={e => first.value = e.currentTarget.value}
						type="text"
						name="first"
						defaultValue={contact.first}
							/>
					<input
						placeholder="Last"
						value={last.value}
						onInput={e => last.value = e.currentTarget.value}
						aria-label="Last name"
						type="text"
						name="last"
						defaultValue={contact.last}
					/>
				</p>
				<label className="space-x-3">
					<span>Twitter</span>
					<input
						type="text"
						name="twitter"
						placeholder="@jack"
						value={twitter.value}
						onInput={e => twitter.value = e.currentTarget.value}
						defaultValue={contact.twitter}
					/>
				</label>
				<label className="space-x-3">
					<span>Avatar URL</span>
					<input
						value={avatar.value}
						onInput={e => avatar.value = e.currentTarget.value}
						placeholder="https://example.com/avatar.jpg"
						aria-label="Avatar URL"
						type="text"
						name="avatar"
						defaultValue={contact.avatar}
					/>
				</label>
				<label className="space-x-3">
					<span>Notes</span>
					<textarea
						name="notes"
						value={notes.value}
						onInput={e => notes.value = e.currentTarget.value}
						defaultValue={contact.notes}
						rows={6}
					/>
				</label>
				<p className="space-x-3">
					<button className="p-2 w-35 " type="submit">Save</button>
					<button className="p-2 w-35 " type="button">Cancel</button>
				</p>
			</form>
		</div>
	);
}